<template>
    <div class="fillcontain">
        <head-top @changeLan='resetLabelWidth'></head-top>
        <div class="search-box" id="searchBox">
            <el-form :model="ruleForm" ref="ruleForm">
                <el-form-item :label="$t('message.systemName')" prop="SystemName" :label-width="nameW">
                    <el-input clearable v-model="ruleForm.SystemName" :placeholder="$t('message.pleaseEnterSystemName')"></el-input>
                </el-form-item>
                <div class="button-line">
                    <el-form-item>
                        <el-tooltip class="item" effect="dark" :content="$t('message.search')" placement="top">
                            <el-button type="primary" @click="submitForm('ruleForm')" icon="iconfont icon-sousuo"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="$t('message.reset')" placement="top">
                            <el-button type="info" @click="resetForm('ruleForm')" icon="iconfont icon-zhongzhi"></el-button>
                        </el-tooltip>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="table_container" v-loading='isloading'>
            <el-tooltip class="item" effect="dark" :content="$t('message.add')" placement="top">
                <el-button class="addBtn" type="primary" @click="handleAdd()" icon="iconfont icon-xinzeng-wubiankuang"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('message.del')" placement="top">
                <el-button class="addBtn" type="info" @click="handleDelete()" icon="iconfont icon-shanchu-kong"></el-button>
            </el-tooltip>
            <el-table
                ref="multipleTable"
                :data="tableData"
                :row-key="row => row.index"
                style="width: 100%;"
                class="tableStyle"
                @selection-change="handleSelectionChange"
                :header-cell-style="{
                    'background-color': '#f8f8f9',
                }"
                :height="tableHeight"
                :max-height="tableHeight">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column :label="$t('message.systemName')" prop="SystemName"></el-table-column>
                <el-table-column :label="$t('message.systemEnName')" prop="EnglishName"></el-table-column>
                <el-table-column :label="$t('message.systemURL')" prop="SystemURL"></el-table-column>
                <el-table-column :label="$t('message.remarks')" prop="Remarks"></el-table-column>
                <el-table-column :label="$t('message.status')" prop="SystemStatus">
                    <template slot-scope="scope">
                        <span class="stateColor" v-bind:class="{effect: scope.row.SystemStatus === '有效'}">{{scope.row.SystemStatus}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('message.operating')">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="$t('message.edit')" placement="top">
                            <el-button type="primary" @click="handleEdit(scope.row)" icon="iconfont icon-bianji-kong"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"  :page-size="PageSize" layout="total, prev, pager, next,sizes"
                    :total="count">
                </el-pagination>
            </div>
            <el-dialog :title="addTitle" :visible.sync="dialogAddVisible"  width="630px" :close-on-click-modal='false'>
                <el-form :model="addForm" :rules="rules" ref="addForm" :label-width="labelWidth">
                    <el-form-item :label="$t('message.systemName')" prop="SystemName" class="w100">
                        <el-input v-model="addForm.SystemName" :placeholder="$t('message.pleaseEnterSystemName')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.systemEnName')" prop="EnglishName" class="w100">
                        <el-input v-model="addForm.EnglishName" :placeholder="$t('message.pleaseEnterSystemEnName')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.status')" prop="SystemStatus" class="w100">
                        <el-radio-group v-model="addForm.SystemStatus">
                            <el-radio :label="1">有效</el-radio>
                            <el-radio :label="2">无效</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="$t('message.systemURL')" prop="SystemURL" class="w100">
                        <el-input v-model="addForm.SystemURL" :placeholder="$t('message.pleaseEnterSystemURL')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.describe')" prop="Description" class="w100">
                        <el-input type="textarea" :rows="5" :placeholder="$t('message.pleaseEnterDescribe')" v-model="addForm.Description"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-tooltip class="item" effect="dark" :content="$t('message.cancel')" placement="top">
                        <el-button @click="cancel" icon="iconfont icon-guanbi-wukuang"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('message.save')" placement="top">
                        <el-button type="primary" @click="addSystem('addForm')" icon="iconfont icon-gou-wukuang"></el-button>
                    </el-tooltip>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import headTop from "../components/headTop";
    import { baseUrl, baseImgPath } from "@/config/env";
    import { getStore, getLocal } from "../config/mUtils"
    // import { getRoleList, getCompanys, editRole, deleteRole, permissions, getRoleInfo } from "@/api/getData";
    export default {
        components: {
            headTop
        },
        data() {
            return {
                baseUrl,
                baseImgPath,
                PageIndex: 1,
                PageSize: 10,
                count: 2,
                tableData: [
                    {
                        SystemID: '001',
                        SystemName: 'EM系统',
                        EnglishName: 'EM',
                        SystemURL: 'http://www.*****.com',
                        Remarks: '部门经理',
                        SystemStatus: '有效'
                    }, {
                        SystemID: '002',
                        SystemName: 'E-Order系统',
                        EnglishName: 'E-Order',
                        SystemURL: 'http://www.*****.com',
                        Remarks: '部门经理',
                        SystemStatus: '无效'
                    }
                ],
                multipleSelection: [],
                currentPage: 1,
                dialogAddVisible: false,
                isloading: false,
                tableHeight: 0,
                ruleForm: {
                    SystemName: ""
                },
                addForm: {
                    SystemName: "",
                    EnglishName: "",
                    SystemStatus: 1,
                    SystemURL: "",
                    Description: ""
                },
                addTitle: this.$t('message.addSystem'),
                nameW: 0 + 'px',
                labelWidth : 0 + 'px'
            };
        },
        computed: {
            rules: function() {
                return {
                    SystemName: [{ required: true, message: this.$t('message.pleaseEnterSystemName'), trigger: "blur" }],
                    EnglishName: [{ required: true, message: this.$t('message.pleaseEnterSystemEnName'), trigger: "blur" }]
                }
            },
        },
        created() {
            this.watchHeight();
            // this.initData();
            this.resetLabelWidth();
        },
        mounted() {
            setTimeout(() => {
                let widowHeight = document.documentElement.clientHeight-275;
                let h = document.getElementById('searchBox').clientHeight;
                this.tableHeight = widowHeight - h;
            }, 1);
        },
        methods: {
            watchHeight() {
                setTimeout(() => {
                    const that = this;
                    window.onresize = function temp() {
                        let widowHeight = document.documentElement.clientHeight-275;
                        let h = document.getElementById('searchBox').clientHeight;
                        that.tableHeight = widowHeight - h;
                    };
                }, 1);
            },
            resetLabelWidth() {
                if (getLocal('language') === 'en_US') {
                    this.nameW = 90 + 'px';
                    this.labelWidth = 115 + 'px';
                } else {
                    this.nameW = 60 + 'px';
                    this.labelWidth = 95 + 'px';
                }
            },
            async initData() {
                /**获取用户列表 */
                try {
                    this.getLanguageResource();
                    this.getSystemList();
                } catch (err) {
                    console.log("获取数据失败", err);
                }
            },
            async getSystemList() {
                const crs = await getRoleList({
                    CompanyCode: this.ruleForm.CompanyCode,
                    RoleName: this.ruleForm.RoleName,
                    PageSize: this.PageSize,
                    PageIndex: this.PageIndex,
                    UserId:getStore('Id')
                });
                if (crs.Flag) {
                    this.isloading = false;
                    this.count = crs.Result.total;
                    this.tableData = crs.Result.rows;
                }
            },
            submitForm(formName) {
                this.getSystemList();
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.getSystemList();
            },
            handleSizeChange(val) {
                this.currentPage = 1;
                this.PageIndex = 1;
                this.PageSize = val;
                this.getSystemList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.PageIndex = val;
                this.getSystemList();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleAdd() {
                this.dialogAddVisible = true;
                this.addForm = {
                    SystemName: "",
                    EnglishName: "",
                    SystemStatus: 1,
                    SystemURL: "",
                    Description: ""
                };
            },
            handleEdit(row) {
                this.$router.push('/businessManageDetail?sysid=' + row.SystemID);
            },
            cancel() {
                this.dialogAddVisible = false;
                this.$refs['addForm'].resetFields();
            },
            addSystem(formName) {
                this.$refs[formName].validate(async valid => {
                    if (valid) {
                        this.dialogAddVisible = false;
                    } else {
                        return false;
                    }
                });
            },
            handleDelete(index,row) {
                if (this.multipleSelection.length > 0) {
                    this.$confirm(this.$t('message.isDel'), 'Warning', {
                        confirmButtonText: ' ',
                        cancelButtonText: ' ',
                        confirmButtonClass: 'iconfont icon-gou-wukuang',
                        cancelButtonClass: 'iconfont icon-guanbi-wukuang',
                        type: 'warning'
                    }).then(() => {
                    }).catch(() => {
                    });
                } else {
                    this.$message({
                        type: "warning",
                        message: this.$t('message.selectDelData')
                    });
                }
            }
        }
    };
</script>
